<!--  -->
<template>
  <div>
    <div class="login-bg">
      <div class="login-box">
        <!--flex弹性盒子模型，justify-content：主抽 -->
        <div style="display: flex; justify-content: center">
          <el-card
            style="
              border-radius: 10px;
              width: 400px;
              box-shadow: rgb(214, 213, 213) 0px 1px 10px 1px;
              position: relative;
            "
          >
            <div slot="header" class="clearfix">
              <span>注册</span>
            </div>
            <div class="Tooltip">
              <el-tooltip
                class="item"
                effect="dark"
                content="输入密码和确认密码须一致"
                placement="right"
              >
                <i class="el-icon-question"></i>
              </el-tooltip>
            </div>
            <form id="login">
              <table class="userInfo">
                <tr>
                  <td>用户名</td>
                  <td>
                    <el-input
                      v-model="user.username"
                      placeholder="请输入用户名"
                      name="userName"
                    ></el-input>
                  </td>
                </tr>
                <tr>
                  <td>密码</td>
                  <td>
                    <el-input
                      type="password"
                      v-model="user.password"
                      placeholder="请输入密码"
                      name="passWord"
                    ></el-input>
                    <!-- @keydown.enter.native="doLogin"当按下enter键的时候也会执行doLogin方法-->
                  </td>
                </tr>
                <tr>
                  <td>确认密码</td>
                  <td>
                    <el-input
                      type="password"
                      v-model="user.checkpassword"
                      placeholder="请输入确认密码"
                      name="checkpassWord"
                    ></el-input>
                    <!-- @keydown.enter.native="doLogin"当按下enter键的时候也会执行doLogin方法-->
                  </td>
                </tr>
                <tr>
                  <td>性别</td>
                  <td>
                    <el-select v-model="user.sex" placeholder="请选择">
                      <el-option
                        v-for="item in sex"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </td>
                </tr>
                <tr>
                  <td>电子邮箱</td>
                  <td>
                    <el-input
                      v-model="user.email"
                      placeholder="请输入电子邮箱"
                      name="email"
                    ></el-input>
                  </td>
                </tr>
                <tr>
                  <td>角色身份</td>
                  <td>
                    <el-select v-model="user.role" placeholder="请选择">
                      <el-option
                        v-for="item in roles"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </td>
                </tr>
                <tr>
                  <!-- 占两行-->
                  <td colspan="2">
                    <!-- 点击事件的两种不同的写法v-on:click和 @click-->
                    <!--<el-button style="width: 300px" type="primary" v-on:click="doLogin">登录</el-button>-->
                    <el-button
                      style="
                        width: 300px;
                        background-color: rgb(0, 47, 167);
                        border: 0;
                      "
                      type="primary"
                      @click="doRegist"
                      >注册</el-button
                    >
                  </td>
                </tr>

                <tr>
                  <td colspan="2">
                    <p>
                      已有账号
                      <router-link :to="{ path: '/' }">登录</router-link>
                    </p>
                  </td>
                </tr>
              </table>
            </form>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        username: "",
        password: "",
        checkpassword: "",
        sex: "",
        email: "",
        role: "",
      },
      sex: [
        {
          value: "1",
          label: "男",
        },
        {
          value: "2",
          label: "女",
        },
      ],
      roles: [
        {
          value: "1",
          label: "学生",
        },
        {
          value: "2",
          label: "教师",
        },
        {
          value: "3",
          label: "图书馆职工",
        },
      ],
    };
  },
  methods: {
    doRegist() {
      // 一点击注册按钮，这个方法就会执行

      if (this.user.username == "") {
        this.$message({
          message: "请输入用户名",
          type: "warning",
        });
        return;
      }
      if (this.user.password == "") {
        this.$message({
          message: "请输入密码",
          type: "warning",
        });
        return;
      }
      if (this.user.password != this.user.checkpassword) {
        this.$message({
          message: "两次输入密码不一致",
          type: "warning",
        });
        return;
      }
      
      var url = "/api/regist";
      var d = "?name=" + this.user.username + "&password=" + this.user.password+ "&sex=" + this.user.sex+ "&email=" + this.user.email+ "&role=" + this.user.role;
      this.axios
        .get(url + d)
        .then((response) => {
          alert(response.data);
          if (response.data == "注册成功") {
            this.$router.push({ path: "/" }); //跳转到登录页
          }
        })
        .catch(function (error) {
          alert("注册失败");
        });
    },
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  // 离开当前页面时执行代码
  destroyed() {},
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.login-bg {
  width: 100%;
  background-color: azure;
  height: 100%;
  background-size: cover;
  background-position: 50%;
  position: fixed;
  left: 0;
  top: 0;
  overflow: hidden;
}

.login-box {
  position: relative;
  height: 100%;
}

.login-box > div {
  height: 450px;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.userInfo {
  padding-right: 25px;
  padding-left: 25px;
  margin: 0;
  height: 200px;
  text-align: left;
}

.userInfo > tr {
  padding-bottom: 30px;
}

.Tooltip {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
}
</style>